前言

延續昨天的主題，今天將介紹第二篇語言的應用，那當然要找 HTML 的好夥伴囉：CSS。

IntelliSense

是的，基本上使用 VS Code 開發任何語言，一定會有這個功能。而 CSS 跟 HTML 一樣，支援是內建的，不用下載語言包。

Emmet

是的，Emmet 支援 CSS 的部分，vs code 完美地實踐。這邊舉幾個例子：

/* 輸入 */
d:f

/* 轉化成 */
display: flex;

其他語法，請參照官方文件（連結）。

排版，Formatting

CSS 的部分 vs code 沒有預設排版的功能，如果按下排版的快捷鍵（Windows: Ctrl + K, Ctrl + F；macOS: ⌘K, ⌘F），會告知沒有對應的功能：

因此需要 Extension 的幫忙，這邊推薦一個擁有不錯下載數的 extension：

• Beautify css/sass/scss/less

顏色預覽

輸入的顏色代碼，vs code 會自動在添增預覽的小方格，提供開發者快速了解輸入的代碼將轉換成什麼顏色。

除此之外，可以快速調整顏色，將游標移動到顏色帶馬上，等待 1 秒，調色盤就會出現了！

使用滑鼠調整顏色、透明度，vs code 會立即將新的顏色轉化成對應的代碼。

不得不說，對工程師而言，可以直接修改、預覽，能省下的時間將會是十分驚人的！

hover

VS Code 十分擅長地運用 hover，在 CSS 也沒有例外。除了上述提到 顏色預覽 之外，還可以游標移動到 選擇器 上，將提供預覽，告知符合選擇器的 HTML 結構。

接下來推薦兩個插件給開發 CSS 的工程師們。

IntelliSense for CSS class names in HTML

連結

在昨天 Day 15: 使用 VS Code 來開發 HTML 有介紹過，因此不重複贅述。

CSS Peek

連結

在 Day 05: 操作上總是有些小秘訣的 提到，vs code 有個很棒的功能 預覽定義，只要將游標移動到要查詢的變數、函式上，接著按下 F12 或是 shift + F12，將會顯示該函式、常數的相關內容。

但是，HTML 內的 CSS 無法支援，因此誕生了可以強化 預覽定義 的插件。

安裝完成後，使用步驟如下：

• 將游標移動到欲查詢的 Class
  • 
• 接著按下F12 或是 shift + F12。（筆者按下F12）
• 將自動開啟新分頁，並將游標轉移到該 Class 上。
  • 

最後來寫點有趣的：Sass、Less。

Sass & Less

這兩個 CSS 家族，vs code 內建支援 Less，對 Sass 的支援，需要插件：Sass。

兩者的撰寫格式請自行 google（關鍵字：Sass 教學、Less 教學），因為撰寫的教學文不是這次的主題。

接著，有使用過兩者的工程師都知道，HTML 不支援 Sass、Less，要轉換成 CSS 才能使用，這邊介紹兩個方法：

手動，使用內建 tasks.json

步驟如下：

1. 安裝 npm package

Sass

npm install -g node-sass

Less

npm install -g node-sass less

2. 完成你的 Sass、Less 檔案。

1. 注意，node-sass 副檔名只支援 .scss。
2. 資料夾結構如下：

Sass

Less

3. 製作 tasks.json。

Sass

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "node-sass styles.scss styles.css",
      "group": "build"
    }
  ]
}

Less

// Less configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Less Compile",
      "type": "shell",
      "command": "lessc styles.less styles.css",
      "group": "build"
    }
  ]
}

4. 執行 task

相關操作請看這篇：Day 13: 試著自動化處理 tasks。

自動，使用 gulp

步驟如下：

1. 安裝 Global gulp

npm install -g gulp

2. 進入有 Sass / Less 的資料夾

全域以及執行的資料夾都需要安裝 gulp。

Sass

npm install gulp gulp-sass

Less

npm install gulp gulp-less

3. 製作 gulpfile.js

在原本的資料夾下新增 gulpfile.js，然後貼上以下內容：

Sass

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function (cb) {
  gulp
    .src('*.scss')
    .pipe(sass())
    .pipe(
      gulp.dest(function (f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('sass', function (cb) {
    gulp.watch('*.scss', gulp.series('sass'));
    cb();
  })
);

Less

// Less configuration
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function (cb) {
  gulp
    .src('*.less')
    .pipe(less())
    .pipe(
      gulp.dest(function (f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('less', function (cb) {
    gulp.watch('*.less', gulp.series('less'));
    cb();
  })
);

4. 資料夾結構

Sass

Less

5. 啟動 gulp

gulp

一旦 .scss、.less 有任何的變動，會馬上更新 .css。

啟動後終端機輸出的內容如下：

Sass

Using gulpfile ~/sass/gulpfile.js
Starting 'default'...
Starting 'sass'...
Finished 'sass' after 8.62 ms
Starting '<anonymous>'...
Finished '<anonymous>' after 13 ms
Finished 'default' after 24 ms
# 編輯內容後，觸發自動更新
Starting 'sass'...
Finished 'sass' after 3.42 ms

Less

Using gulpfile ~/less/gulpfile.js
Starting 'default'...
Starting 'less'...
Finished 'less' after 9.56 ms
Starting '<anonymous>'...
Finished '<anonymous>' after 14 ms
Finished 'default' after 27 ms
# 編輯內容後，觸發自動更新
Starting 'less'...
Finished 'less' after 3.15 ms

結論

閱讀完這篇，對於 vs code 如何輔助 CSS 的開發，想必會有更多的了解。
如果是需要自動化轉化的工程師們，這篇也補足，省去開啟瀏覽器找尋 online convertor 這件事。